<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath }"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Evernote - 登录</title>
<meta name="description"
	content="particles.js is a lightweight JavaScript library for creating particles.">
<meta name="author" content="Vincent Garreau" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="${path }/static/css/style.css">
<link rel="stylesheet" type="text/css" href="${path }/static/css/reset.css" />
<link href="${path }/static/css/toastr.min.css" rel="stylesheet">
</head>
<body>

	<div>
		<div class="login">
			<div class="login-top">登录</div>
			<div class="login-center clearfix">
				<div class="login-center-img">
					<img src="${path }/static/img/name.png" />
				</div>
				<div class="login-center-input">
					<input type="text" name="username" id="username" value="" placeholder="请输入您的用户名"
						onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'" />
					<div class="login-center-input-text">用户名</div>
				</div>
			</div>
			<div class="login-center clearfix">
				<div class="login-center-img">
					<img src="${path }/static/img/password.png" />
				</div>
				<div class="login-center-input">
					<input type="password" name="password" id="password" value="" placeholder="请输入您的密码"
						onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'" />
					<div class="login-center-input-text">密码</div>
				</div>
			</div>
			<div class="login-button">登陆</div>
			<div class="register-button">注册</div>
		</div>
		<div class="sk-rotating-plane"></div>
	</div>

	<!-- scripts -->
	<script src="${path }/static/js/particles.min.js"></script>
	<script src="${path }/static/js/app.js"></script>
	<script src="${path }/static/js/jquery.min.js"></script>
	<script src="${path }/static/js/toastr.min.js"></script>
	<script type="text/javascript">
		function hasClass(elem, cls) {
			cls = cls || '';
			if (cls.replace(/\s/g, '').length == 0)
				return false; //当cls没有参数时，返回false
			return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
		}

		function addClass(ele, cls) {
			if (!hasClass(ele, cls)) {
				ele.className = ele.className == '' ? cls : ele.className + ' '
						+ cls;
			}
		}

		function removeClass(ele, cls) {
			if (hasClass(ele, cls)) {
				var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '')
						+ ' ';
				while (newClass.indexOf(' ' + cls + ' ') >= 0) {
					newClass = newClass.replace(' ' + cls + ' ', ' ');
				}
				ele.className = newClass.replace(/^\s+|\s+$/g, '');
			}
		}
		//发送POST请求跳转到指定页面
		function post(URL, PARAMS) {
		    var temp = document.createElement("form");
		    temp.action = URL;
		    temp.method = "post";
		    temp.style.display = "none";

		    for (var x in PARAMS) {
		        var opt = document.createElement("textarea");
		        opt.name = x;
		        opt.value = PARAMS[x];
		        temp.appendChild(opt);
		    }
		    document.body.appendChild(temp);
		    temp.submit();
		    return temp;
		}
		
		document.querySelector(".login-button").onclick = function() {
			var username = document.getElementById("username").value;
			var password = document.getElementById("password").value;
			if(username != null && username != "" && password != null && password != "") {
				var params = {
			        "username":username,
			        "password":password
			    };
			    post("DoLogin", params);
			} else {
				msg = '请输入正确的用户名或密码';
				$(function() {
	            	toastr.warning(msg, "error"); // Wire up an event handler to a button in the toast, if it exists
	            })
			}
		}
		document.querySelector(".register-button").onclick = function() {
			window.location.href = "ToRegister";
		}
		
		var msg = '${msg}';
		if(msg == "注册成功") {
			$(function() {
            	toastr.success(msg, "success"); // Wire up an event handler to a button in the toast, if it exists
            })
		} else if(msg == "用户名不存在" || msg == "密码错误") {
			$(function() {
            	toastr.error(msg, "error"); // Wire up an event handler to a button in the toast, if it exists
            })
		}
	</script>
</body>
</html>